<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="未读消息" name="first">
        <message-list
          :messageObject="unReadMsg"
          :loading="unReadLoading"
          @refresh="refreshMsgList"
          @page-change="handleUnReadPageChange"
        />
      </el-tab-pane>
      <el-tab-pane label="待处理消息" name="second">
        <message-list
          :messageObject="notProcess"
          :loading="notProcessLoading"
          @refresh="refreshMsgList"
          @page-change="handleNotProcessPageChange"
        />
      </el-tab-pane>
      <el-tab-pane label="历史消息" name="third">
        <message-list
          :messageObject="histories"
          :loading="historiesLoading"
          @refresh="refreshMsgList"
          @page-change="handleHistoryPageChange"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {
  mapGetters,
  mapActions
} from 'vuex'
import MessageList from './MessageList'
import {
  notReaded,
  notProcess,
  histories
} from '@/api/notify'
export default {
  name: 'Notify',
  components: {
    MessageList
  },
  data () {
    return {
      activeName: 'first',
      pageSize: 12,
      histories: null,
      notProcess: null,
      unReadLoading: false,
      notProcessLoading: false,
      historiesLoading: true,
      unReadPageNum: 1,
      notProcessPageNum: 1,
      historiesPageNum: 1
    }
  },
  computed: {
    ...mapGetters({
      unReadMsg: 'unReadMsg'
    })
  },
  mounted () {
    this.refreshMsgList()
  },
  methods: {
    ...mapActions({
      updateUnRead: 'socket/updateUnRead'
    }),
    /**
     * 刷新列表
     */
    refreshMsgList () {
      this.handleNotReaded(this.unReadPageNum)
      this.handleNotProcess(this.notProcessPageNum)
      this.handleHistories(this.historiesPageNum)
    },
    /**
     * 获取未读消息
     */
    async handleNotReaded (pageNum) {
      const { data } = await notReaded(pageNum, this.pageSize)
      this.updateUnRead(data)
      this.unReadLoading = false
    },
    // 拉取未处理
    async handleNotProcess (pageNum) {
      this.notProcessLoading = true
      const { data } = await notProcess(pageNum, this.pageSize)
      this.notProcess = data
      this.notProcessLoading = false
    },
    // 获取历史消息
    async handleHistories (pageNum) {
      this.historiesLoading = true
      const { data } = await histories(pageNum, this.pageSize)
      this.histories = data
      this.historiesLoading = false
    },
    handleUnReadPageChange (currentPage) {
      this.unReadPageNum = currentPage
      this.handleNotReaded(currentPage)
    },
    handleNotProcessPageChange (currentPage) {
      this.notProcessPageNum = currentPage
      this.handleNotProcess(currentPage)
    },
    handleHistoryPageChange (currentPage) {
      this.historiesPageNum = currentPage
      this.handleHistories(currentPage)
    }
  }
}
</script>

<style lang="scss" scoped>
.operationButtonList {
  width: 100%;
  height: 35px;
  background-color: #d6dee6;
  padding-left: 5px;
}
.el-button--info.is-plain {
  height: 25px;
  padding: 0px 5px 0px 5px;
  margin: 5px;
}
</style>
